@import "../../assets/css/theme";
.yield {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  line-height: 1.4;
  text-align: center;
  width: 1.3rem;
}
.g {
  //box-shadow: inset -1px 0 0 $bg-grey, inset 0 -1px 0 0 $bg-grey;
  border-bottom: .6px solid $color-grey-light;
  border-right: .6px solid $color-grey-light;
  text-align: center;
  box-sizing: border-box;
  &.on {
    background: $color-red;
    color: #fff;
    * {
      color: #fff;
    }
  }
  &.expand {
    display: inherit;
    align-items: center;
    line-height: 1.3;
    width: 2.5rem;
  }
  small { color: $color-grey }
}
.sg {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    border: 1px solid $color-orange-light;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.yield + .sg {
  &:after {
    border-left: 0;
  }
}
.box {
  line-height: 1.2;
  padding: .2rem 0;
  small {
    color: $color-grey
  }
}
.box-sm { flex-basis: 14.285714% }
.box-md { flex-basis: 20% }
.box-lg { flex-basis: 25% }
.box-xl { flex-basis: 33% }
